import React from 'react';
import { Card, Typography, Upload, Button, message } from 'antd';
import { InboxOutlined, PictureOutlined, VideoCameraOutlined } from '@ant-design/icons';

const { Title, Text } = Typography;
const { Dragger } = Upload;

const UploadPage = () => {
  const uploadProps = {
    name: 'file',
    multiple: true,
    action: '/api/upload/single',
    onChange(info) {
      const { status } = info.file;
      if (status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (status === 'done') {
        message.success(`${info.file.name} 文件上传成功`);
      } else if (status === 'error') {
        message.error(`${info.file.name} 文件上传失败`);
      }
    },
    onDrop(e) {
      console.log('Dropped files', e.dataTransfer.files);
    },
  };

  return (
    <div className="upload-page">
      <Title level={2}>文件上传</Title>
      
      <Card className="upload-card">
        <Dragger {...uploadProps}>
          <p className="ant-upload-drag-icon">
            <InboxOutlined />
          </p>
          <p className="ant-upload-text">点击或拖拽文件到此区域上传</p>
          <p className="ant-upload-hint">
            支持单个或批量上传图片和视频文件
          </p>
        </Dragger>
      </Card>

      <Card title="支持的文件格式" className="format-card">
        <div className="format-list">
          <div className="format-item">
            <PictureOutlined className="format-icon" />
            <div>
              <Text strong>图片格式</Text>
              <br />
              <Text type="secondary">JPG, PNG, WEBP, BMP, TIFF</Text>
            </div>
          </div>
          <div className="format-item">
            <VideoCameraOutlined className="format-icon" />
            <div>
              <Text strong>视频格式</Text>
              <br />
              <Text type="secondary">MP4, AVI, MOV, WMV, MKV</Text>
            </div>
          </div>
        </div>
      </Card>

      <Card title="使用说明" className="instruction-card">
        <ul>
          <li>单张图片最大支持20MB</li>
          <li>单个视频最大支持500MB</li>
          <li>批量上传最多支持10个文件</li>
          <li>支持拖拽上传和点击选择文件</li>
          <li>上传后会自动开始去水印处理</li>
        </ul>
      </Card>
    </div>
  );
};

export default UploadPage; 